<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :destroyOnClose="true"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="overflow: auto;padding-bottom: 53px;">

    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button
            @click="toggleScreen"
            icon="appstore"
            style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>

    </template>

    <a-spin :spinning="confirmLoading">
      <a-form-model
        ref="ruleForm"
        :model="companyInfo"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <div style="height: 0;width: 0;margin-left: -1000px;">
          <a-input type="text" ></a-input>
          <a-input type="password"  placeholder="请输入密码"
                    autocomplete="new-password"></a-input>
        </div>
        <a-form-model-item
          label="登录账号"
          prop="login"
          :rules="$valid.required"
          :maxLength="50">
          <a-input v-model="companyInfo.login" placeholder="请输入登录账号" autocomplete="off"/>
        </a-form-model-item>
        <a-form-model-item
                prop="password1"
                :rules="validatorRules.password.rules"
                :maxLength="15"
                label="密码"
        v-if="isadd">
          <a-input
                  type="password"
                  placeholder="请输入密码"
                  v-model="companyInfo.password1" autocomplete="new-password"/>
        </a-form-model-item>

        <a-form-model-item
                prop="password2"
                :rules="validatorRules.confirmpassword.rules"
                :maxLength="15"
                label="确认密码"
                v-if="isadd">
          <a-input
                  type="repassword"
                  placeholder="请输入密码"
                  v-model="companyInfo.password2"/>
        </a-form-model-item>
        <a-form-model-item
          label="用户姓名"
          prop="companyName"
          :rules="$valid.required"
          :maxLength="50">
          <a-input v-model="companyInfo.companyName" placeholder="请输入"/>
        </a-form-model-item>
        <a-form-model-item label="性别" prop="sex"  :rules="$valid.required">
          <a-select v-model="companyInfo.sex" placeholder="请选择性别">
            <a-select-option
                v-for="(item) in this.$sysDictOptions('sex')"
                :key="item.k"
                :value="parseInt(item.k)">
              {{ item.v }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="出生日期" prop="birthday"  :rules="$valid.required">
          <a-date-picker
              v-model="companyInfo.birthday"
              inputReadOnly
              type="date"
              valueFormat="YYYY-MM-DD"
              format="YYYY-MM-DD"
              placeholder="请选择出生日期"
              style="width: 100%;"
          />
        </a-form-model-item>
        <a-form-model-item
          label="政治面貌"
          prop="companyName"
          :rules="$valid.required"
          :maxLength="50">
        <a-select v-model="companyInfo.political" placeholder="请选择政治面貌">
          <a-select-option v-for="(item) in this.$sysDictOptions('political')" :key="item.k"  :value="parseInt(item.k)">
            {{ item.v }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

        <a-form-model-item
            label="第一学历"
            prop="companyName"
            :rules="$valid.required"
            :maxLength="50">
          <a-select v-model="companyInfo.educational" placeholder="请选择第一学历">
            <a-select-option v-for="(item) in this.$sysDictOptions('educational')" :key="item.k"  :value="parseInt(item.k)">
              {{ item.v }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
            label="用工形式"
            prop="companyName"
            :rules="$valid.required"
            :maxLength="50">
          <a-select v-model="companyInfo.employment" placeholder="请选择用工形式">
            <a-select-option v-for="(item) in this.$sysDictOptions('employment')" :key="item.k"  :value="parseInt(item.k)">
              {{ item.v }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
            label="联系电话"
            prop="mobile"
            :rules="[$valid.checkMobile]">
          <a-input v-model="companyInfo.mobile" placeholder="请输入联系电话"/>
        </a-form-model-item>
        <a-form-model-item
            label="参加工作时间"
            prop="companyName"
            :rules="$valid.required"
            :maxLength="50">
          <a-date-picker
              v-model="companyInfo.workDate"
              inputReadOnly
              type="date"
              valueFormat="YYYY-MM-DD"
              format="YYYY-MM-DD"
              placeholder="请选择参加工作时间"
              style="width: 100%;"
          />
        </a-form-model-item>
        <a-form-model-item
          label="归属部门"
          prop="departCode">
          <a-input
            v-model="companyInfo.departCode"
            placeholder="请输入"
            type="hidden"/>
          <depart-window-show
            v-if="visible"
            :multiple-flag="false"
            :org-flag="-1"
            :checkedDepartKeys="departCode"
            @ok="departOk"
          ></depart-window-show>
        </a-form-model-item>
<!--        <a-form-model-item-->
<!--          label="管理部门"-->
<!--          prop="departManagerCode">-->
<!--          <a-input-->
<!--            v-model="companyInfo.departManagerCode"-->
<!--            placeholder="请输入"-->
<!--            type="hidden"/>-->
<!--          <depart-window-show-->
<!--            v-if="visible"-->
<!--            :org-flag="-1"-->
<!--            :multiple-flag="true"-->
<!--            :checkedDepartKeys="departManagerCode"-->
<!--            @ok="departManagerOk"-->
<!--          ></depart-window-show>-->
<!--        </a-form-model-item>-->
        <!--        <a-form-model-item label="岗位" prop="postFlag" :rules="$valid.required">-->
        <!--          <a-select v-model="companyInfo.postFlag" placeholder="请选择岗位">-->
        <!--            <a-select-option-->
        <!--              v-for="(item) in this.$sysDictOptions('postFlag')"-->
        <!--              :key="item.k"-->
        <!--              :value="parseInt(item.k)">-->
        <!--              {{ item.v }}-->
        <!--            </a-select-option>-->
        <!--          </a-select>-->
        <!--        </a-form-model-item>-->
        <a-form-model-item
          label="角色列表"
          prop="selectedRole"
          v-show="!roleDisabled">
          <a-select
            mode="multiple"
            style="width: 100%"
            placeholder="请选择用户角色"
            @change="roleChange"
            optionFilterProp="children"
            v-model="selectedRole">
            <a-select-option
              v-for="(role,roleindex) in roleList"
              :key="roleindex.toString()"
              :value="role.id">
              {{ role.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>


<!--        <a-form-model-item label="头像" prop="avatar">-->
<!--          <w-image-upload-->
<!--            class="avatar-uploader"-->
<!--            text="上传"-->
<!--            :multipleFlag="false"-->
<!--            :file-max-size="1"-->
<!--            v-model="companyInfo.avatar"-->
<!--            bizPath="companyPic"></w-image-upload>-->
<!--        </a-form-model-item>-->

      </a-form-model>
    </a-spin>
    <div class="drawer-bootom-button">
      <a-popconfirm
        title="确定放弃编辑？"
        @confirm="handleCancel"
        okText="确定"
        cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button
        @click="handleSubmit"
        type="primary"
        :loading="confirmLoading">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
  import moment from 'moment'
  import DepartWindowShow from '@/components/WxDepartChoose/DepartWindowShow'
  import WxSelectCompanyComponent from '@/components/WxSelectBizComponent/WxSelectCompanyComponent'
  import WImageUpload from '@/components/WxImageUpload/WImageUpload'
  // 引入搜索部门弹出框的组件
  import { getCompanyInfo, getUserRoleAll, saveCompanyInfo } from '@/api/api'

  export default {
    name: 'UserModal',
    components: {
      DepartWindowShow,
      WImageUpload,
      WxSelectCompanyComponent
    },
    data () {
      return {
        roleDisabled: false, // 是否是角色维护调用该页面
        modalWidth: 800,
        drawerWidth: 700,
        modaltoggleFlag: true,
        dateFormat: 'YYYY-MM-DD',
        title: '操作',
        visible: false,
        selectedRole: [],
        roleList: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        uploadLoading: false,
        confirmLoading: false,
        companyInfo: {
          sex: 1,
          selectedRole: '',
          departManagerCode: '',
          departCode: '',
          avatar: '',
          companyId: undefined,
            password1:'',
            password2:''
        },
          isadd:true,
          validatorRules: {
              password: {
                  rules: [{
                      required: true, message: '请输入密码!'
                  }]
              },
              confirmpassword: {
                  rules: [{
                      required: true, message: '请确认密码!'
                  }]
              }
          },
        departManagerCode: '',
        departCode: ''
      }
    },
    created () {
    },
    computed: {},
    methods: {
      // 窗口最大化切换
      toggleScreen () {
        if (this.modaltoggleFlag) {
          this.modalWidth = window.innerWidth
        } else {
          this.modalWidth = 800
        }
        this.modaltoggleFlag = !this.modaltoggleFlag
      },
      // 获取所有角色
      initialRoleList () {
        getUserRoleAll().then((res) => {
          this.roleList = res.result.data
        })
      },
      add () {
          this.isadd=true
        this.edit()
      },
      edit (record) {
        this.resetScreenSize() // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
        const that = this
        that.initialRoleList()
        that.visible = true
        // 调用查询用户对应的部门信息的方法
        that.departManagerCode = ''
        that.departCode = ''
        if (record && record.hasOwnProperty('companyId')) {
          getCompanyInfo({ companyId: record.companyId }).then((res) => {
            this.selectedRole = res.result.roleList
            that.companyInfo = res.result.companyInfo
            const tmpManagerCode = []
            res.result.departManagerCode.map(x => {
              tmpManagerCode.push(x)
            })
            that.departManagerCode = tmpManagerCode.join(',')
            that.departCode = res.result.companyInfo.departCode
              that.isadd=false
          })
        }
      },
      close () {
        this.$emit('close')
        this.visible = false
        this.selectedRole = []
        this.companyInfo = {}
        this.$refs.ruleForm.resetFields()
      },
      moment,
      roleChange (k, l) {
        this.companyInfo.selectedRole = this.selectedRole.join(',')
      },
      handleSubmit () {
        const that = this
        that.confirmLoading = true
        this.companyInfo.selectedRole = this.selectedRole.join(',')
        this.companyInfo.departCode = this.departCode
        this.companyInfo.departManagerCode = this.departManagerCode
        // 触发表单验证
        this.$refs.ruleForm.validate(valid => {
          console.log(valid)
          if (valid) {
              if (this.companyInfo.password1 === this.companyInfo.password2) {
                  this.companyInfo.passwd=this.companyInfo.password1
                  saveCompanyInfo(this.companyInfo).then(res => {
                      this.$refs.ruleForm.resetFields()
                      this.$message.success(res.content)
                      this.visible = false
                      this.$emit('ok')
                      that.departManagerCodeNames = []
                      that.close()
                  }).finally(() => {
                      that.confirmLoading = false
                  })
              }else{
                  this.$message.error('两次密码不一致')
                  this.confirmLoading = false
              }
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.close()
      },
      // 获取用户对应部门弹出框提交给返回的数据
      departOk (val) {
        this.departCode = val
        console.log('this.departCode=' + this.departCode)
      },
      // 获取用户对应部门弹出框提交给返回的数据
      departManagerOk (val) {
        this.departManagerCode = val
      },
      // 根据屏幕变化,设置抽屉尺寸
      resetScreenSize () {
        const screenWidth = document.body.clientWidth
        if (screenWidth < 500) {
          this.drawerWidth = screenWidth
        } else {
          this.drawerWidth = 700
        }
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader > .ant-upload {
    width: 104px;
    height: 104px;
  }

  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 10px;
    padding-bottom: 10px;
  }
</style>
